<template>
  <!-- 定义一个容器用于显示网络拓扑图 -->

  <!-- 展示组件的容器 -->
  <div v-if="showDetail" style="position: relative; top: 0; left: 0; width: 100%; height: 100%">
    <el-icon class="return-icon" @click="showOriginalTopology">
      <Back />
    </el-icon>
    <component :is="currentComponent" :name="selectedNodeName" :data="data" ref="detailComponent"></component>
  </div>
  <div v-else style="display: flex; width: 100%; height: 90%">
    <!-- 拓扑图容器 -->
    <div id="network-topology" style="flex: 1; height: 90%"></div>
    <!-- 表格容器 -->
    <div style="flex: 1; height: 100%; padding: 20px">
      <el-table :data="tableData" style="width: 70%" border>
        <el-table-column label="属性" width="200px">
          <template v-slot="scope">
            <div style="line-height: 30px">
              <strong>{{ scope.row.attribute }}</strong>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="负载/结果">
          <template v-slot="scope">
            <div style="line-height: 30px">{{ scope.row.value }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import ResultGraph from "@/components/echarts/system/ResultGraph.vue";

export default {
  name: "NetworkTopology",
  components: {
    ResultGraph,
  },
  props: {
    data: {
      type: Object,
      default: () => [],
    },
  },
  watch: {
    data(newData) {
      if (newData) {
        this.tableData = this.formatData(newData);
      }
    },
  },
  data() {
    return {
      myChart: null,
      showDetail: false, // 控制是否展示详情
      selectedNodeName: "", // 存储点击的节点名称
      currentComponent: null,
      tableData: [],
      option: {
        initChart: {
          series: [
            {
              type: "graph",
              layout: "none",
              data: [
                {
                  name: "SMF",
                  x: 500,
                  y: 0,
                  symbol: "image://" + require("@/assets/icon/server.png"),
                  symbolSize: [70, 80],
                },
                {
                  name: "xxx",
                  x: 550,
                  y: 0,
                  symbol: "none",
                  symbolSize: [70, 80],
                  label: {
                    show: false,
                  },
                },
                {
                  name: "NWDAF",
                  x: 350,
                  y: 0,
                  symbol: "image://" + require("@/assets/icon/leaf2.png"),
                  symbolSize: [70, 80],
                },
                {
                  name: "UPF-0",
                  x: 150,
                  y: 0,
                  symbol: "image://" + require("@/assets/icon/nwdaf2.png"),
                  symbolSize: [90, 80],
                },
                {
                  name: "UPF-1",
                  x: 150,
                  y: 100,
                  symbol: "image://" + require("@/assets/icon/nwdaf2.png"),
                  symbolSize: [90, 80],
                },
                {
                  name: "UPF-2",
                  x: 150,
                  y: 200,
                  symbol: "image://" + require("@/assets/icon/nwdaf2.png"),
                  symbolSize: [90, 80],
                },
                {
                  name: "UPF-3",
                  x: 150,
                  y: 300,
                  symbol: "image://" + require("@/assets/icon/nwdaf2.png"),
                  symbolSize: [90, 80],
                },
              ],
              links: [
                // { source: 'UDR', target: 'AUSF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
                // { source: 'NRF', target: 'AMF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
                // { source: 'PCF', target: 'SMF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
                // { source: 'NSSF', target: 'NWDAF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
                // { source: 'DCCF', target: 'ADRF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
                // { source: 'UPF-0', target: 'UPF-1', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
                // { source: 'UPF-2', target: 'UPF-3', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
                // { source: 'SMF', target: 'UPF中心点', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              ], // 初始化为空
              label: {
                show: true,
                position: "bottom",
                formatter: "{b}",
                color: "white",
                fontSize: 25,
              },
              lineStyle: {
                curveness: 0,
                width: 2,
                color: "white",
                opacity: 1,
              },
            },
          ],
        },
      },
    };
  },
  mounted() {
    this.initChart();
  },
  beforeUnmount() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
  methods: {
    initChart() {
      console.log("init");
      const container = document.getElementById("network-topology");
      if (container) {
        this.myChart = echarts.init(container);
        this.$nextTick(() => {
          this.myChart.setOption(this.option.initChart);
          this.myChart.on("click", this.handleNodeClick);
        });
      }
    },
    formatData(data) {
      // 深拷贝数据
      const copiedData = JSON.parse(JSON.stringify(data));
      // 对拷贝后的数据进行处理
      copiedData.origin_path = "UPF-" + copiedData.origin_path[0] + " -> UPF-" + copiedData.origin_path[1] + " -> 服务端" + (copiedData.origin_path[1] - 1);
      copiedData.strategy_path = "UPF-" + copiedData.strategy_path[0] + " -> UPF-" + copiedData.strategy_path[1] + " -> 服务端" + (copiedData.strategy_path[1] - 1);
      return [
        { attribute: "UPF0负载", value: copiedData.upf0_load.toFixed(3) },
        { attribute: "UPF1负载", value: copiedData.upf1_load.toFixed(3) },
        { attribute: "UPF2负载", value: copiedData.upf2_load.toFixed(3) },
        { attribute: "UPF3负载", value: copiedData.upf3_load.toFixed(3) },
        { attribute: "服务器0负载", value: copiedData.server0_load.toFixed(3) },
        { attribute: "服务器1负载", value: copiedData.server1_load.toFixed(3) },
        { attribute: "目标检测原始路径", value: copiedData.origin_path },
        { attribute: "文件传输原始路径", value: "UPF-1 -> UPF-2 -> 服务端1" },
        { attribute: "决策路径", value: "目标检测：" + copiedData.strategy_path },
      ];
    },
    deployChart() {
      if (this.myChart) {
        this.myChart.setOption(this.option.deployChart);
      } else {
        this.initChart();
        this.myChart.setOption(this.option.deployChart);
      }
    },
    handleNodeClick(params) {
      this.selectedNodeName = params.name.toLowerCase(); // 更新点击的节点名称
      const componentMap = {
        "UPF-0": "ResultGraph",
        "UPF-1": "ResultGraph",
        "UPF-2": "ResultGraph",
        "UPF-3": "ResultGraph",
      };
      const componentName = componentMap[params.name];
      if (componentName) {
        this.currentComponent = componentName;
        this.showDetail = true;
      }
    },
    showOriginalTopology() {
      this.showDetail = false; // 隐藏详情，展示原始拓扑图
      this.currentComponent = null;
      this.selectedNodeName = ""; // 重置点击的节点名称
      this.clearIntervalInComponent(); // 清除子组件中的定时器
      if (this.myChart) {
        this.myChart.dispose();
      }
      // 重新初始化图表
      this.$nextTick(() => {
        this.initChart();
      });

      // 如果子组件存在且有销毁图像的方法，调用销毁方法
      const detailComponent = this.$refs.detailComponent;
      if (detailComponent && detailComponent.destroyChart) {
        detailComponent.destroyChart(); // 调用子组件的销毁方法
      }
    },
    clearIntervalInComponent() {
      if (this.$refs.detailComponent && this.$refs.detailComponent.intervalId) {
        clearInterval(this.$refs.detailComponent.intervalId);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../table.scss";

/* 设置容器的宽度和高度 */
#network-topology {
  position: absolute;
  width: 100%;
  height: 90%;
}

.return-icon {
  position: absolute;
  left: 10px;
  top: -40px;
  background-color: transparent;
  color: cyan;
  font-size: 40px;
  cursor: pointer;
  outline: none;
  z-index: 1;
}

.return-icon::after {
  content: "首页";
  /* 这是要显示的文字 */
  position: absolute;
  left: 100%;
  /* 将文字放置在图标的右侧 */
  top: 50%;
  transform: translateY(-50%);
  /* 垂直居中对齐 */
  white-space: nowrap;
  /* 防止文字换行 */
  background-color: transparent;
  /* 背景颜色 */
  color: cyan;
  /* 文字颜色 */
  padding: 2px 4px;
  /* 内边距 */
  border-radius: 4px;
  /* 圆角 */
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s;
  /* 过渡效果 */
  pointer-events: none;
  /* 防止伪元素影响点击事件 */
  font-size: 24px;
  font-weight: bold;
}

.return-icon:hover::after {
  opacity: 1;
  /* 鼠标悬停时显示 */
  pointer-events: auto;
  /* 鼠标悬停时允许点击 */
}

.el-table {
  background-color: transparent;
  /* 透明背景 */
  border: none;
  /* 去除表格的边框 */
  position: absolute;
  top: 27%;
  left: 25%;
}

.el-table th {
  font-weight: bold;
  color: #333;
  /* 修改表头的字体颜色 */
}

.el-table .el-table__cell {
  /* 为单元格增加内边距 */
  color: #333;
  /* 设置文本颜色 */
}
</style>
